﻿<%@ Page Title="" Language="C#" MasterPageFile="~/Site1.Master" AutoEventWireup="true" CodeBehind="EnhancedTextBoxes.aspx.cs" Inherits="EwcControlTest.EnhancedTextBoxes" %>
<%@ Register Assembly="EnhancedWebControls" Namespace="EnhancedWebControls" TagPrefix="ewc" %>
<asp:Content ID="Content1" ContentPlaceHolderID="head" runat="server">
<style type="text/css">
.Property
{
    float:left;
    font-weight:bold;
    color:#444444;
    width:150px;
    margin-top:10px;
    border-bottom:1px dotted #aaaaaa;
}
.PropertyDescription
{
    margin-top:10px;
    padding:4px;
    border:1px dotted #aaaaaa;
    float:left;
    width:790px;
}
</style>
</asp:Content>
<asp:Content ID="Content2" ContentPlaceHolderID="ContentPlaceHolder1" runat="server">
    <div class="HeaderSection">
        Enhanced Text Boxes
    </div>    
    <div class="MessageSection">
        Overview 
    </div>
    <div class="Section">
        <b>Attached Label</b><br/>
        This control includes an attached label which will eliminate the need for table driven form layout. The labels are rendered in divs and the lengths are customizable.<br/>
        <br/><b>Watermark (Empty Message)</b><br/>
        This control includes a message that is displayed in the textbox when it is empty and disappears when the control gains focus or has a value<br/>
        <br/><b>Visual Focus Enhancements</b><br/>
        This control will change its visual elements in the client browser when the control gains and looses focus. By default the border and font colors will change color; however, this is customizable using the styling detailed below.<br/>
        <br/><b>AutoPostBack Enhancement</b><br/>
        In addition to the normal AutoPostBack behavior where the control posts back when it looses focus this control contains a mode that will postback on each key up event. This allows real time search results when using this control.<br/>
        <br/><b>Multiple Modes</b><br/>
        This control supports multiple Modes such as Error Mode which alerts a user that the control caused an error or Label Mode which is a read only mode without the textbox.<br/>
        <br/><b>Full Style Customization</b><br/>
        Using a custom stylesheet combined with the CssClass property of this control developers are able to skin this control. Use the skin customization guide below for more detail.<br/>
    </div>
    <div class="MessageSection">
        Demo
    </div>
    <div class="Section">
        <asp:UpdatePanel ID="UpdatePanel1" runat="server" RenderMode="Inline">
            <ContentTemplate>
                <ewc:EnhancedTextBox id="EnhancedTextBox1" runat="server" LabelText="Label Mode:" LabelWidth="200px" FieldWidth="220px" LabelMode="true">Label Text</ewc:EnhancedTextBox>
                <ewc:EnhancedTextBox id="EnhancedTextBox2" runat="server" LabelText="Error Mode:" LabelWidth="200px" FieldWidth="220px" ErrorMode="true">This is Error Mode</ewc:EnhancedTextBox>
                <ewc:EnhancedTextBox id="EnhancedTextBox3" runat="server" LabelText="Watermark:" LabelWidth="200px" FieldWidth="220px" EmptyMessage="Watermark's\Message"></ewc:EnhancedTextBox>
                <ewc:EnhancedTextBox id="EnhancedTextBox4" runat="server" LabelText="Field Align:" LabelWidth="200px" FieldWidth="220px" FieldAlign="Right" Text="Right"></ewc:EnhancedTextBox>
                <ewc:EnhancedTextBox id="EnhancedTextBox5" runat="server" LabelText="Field Align:" LabelWidth="200px" FieldWidth="220px" FieldAlign="Center" Text="Center"></ewc:EnhancedTextBox>
                <ewc:EnhancedTextBox id="EnhancedTextBox6" runat="server" LabelText="Phone Mask:" LabelWidth="200px" FieldWidth="220px" PhoneMode="true"></ewc:EnhancedTextBox>
                <ewc:EnhancedTextBox id="EnhancedTextBox8" runat="server" LabelText="Password:" LabelWidth="200px" FieldWidth="220px" TextMode="Password"></ewc:EnhancedTextBox>
                <ewc:EnhancedTextBox id="EnhancedTextBox7" runat="server" LabelText="Text Area:" LabelWidth="200px" FieldWidth="220px" TextAreaHeight="100px" TextMode="MultiLine"></ewc:EnhancedTextBox>
                <div style="float:left;clear:both;width:950px">
                    <ewc:EnhancedTextBox id="txtTestBox1" runat="server" LabelText="Test Normal AutoPostBack:" LabelWidth="200px" FieldWidth="220px" AutoPostBackMode="Normal" OnTextChanged="TestAutoPostBackNormal" style="clear:none;"></ewc:EnhancedTextBox>
                    <asp:Label ID="lblResults1" runat="server" cssclass="TestResults" Visible="false"></asp:Label>
                </div>
            </ContentTemplate>
        </asp:UpdatePanel>
        <div style="float:left;clear:both;width:950px">
            <asp:UpdatePanel ID="UpdatePanel2" runat="server" RenderMode="Inline" UpdateMode="Conditional" ChildrenAsTriggers="false">
                <ContentTemplate>
                    <ewc:EnhancedTextBox id="txtTestBox2" runat="server" LabelText="Test OnKeyUp AutoPostBack:" LabelWidth="200px" FieldWidth="220px" AutoPostBackMode="OnKeyUp" OnTextChanged="TestAutoPostBackOnKeyUp" style="clear:none;" EmptyMessage="Test..."></ewc:EnhancedTextBox>
                </ContentTemplate>
            </asp:UpdatePanel>
            <asp:UpdatePanel ID="UpdatePanel3" runat="server" RenderMode="Inline">
                <ContentTemplate>
                    <asp:Label ID="lblResults2" runat="server" cssclass="TestResults" Visible="false"></asp:Label>
                </ContentTemplate>
                <Triggers>
                    <asp:AsyncPostBackTrigger ControlID="txtTestBox2" />
                </Triggers>
            </asp:UpdatePanel>
        </div>
    </div>
    <div class="MessageSection">
        Properties 
    </div>
    <div class="Section">
        <div class="Property">LabelWidth</div>
        <div class="PropertyDescription">Set the width in pixels of the label side of the control</div>
        <div class="Property">FieldWidth</div>
        <div class="PropertyDescription">Set the width in pixels of the control side of the control</div>
        <div class="Property">LabelText</div>
        <div class="PropertyDescription">Set the text displayed in the left side label</div>
        <div class="Property">LabelMode</div>
        <div class="PropertyDescription">Set wether the control is in label mode. Label mode is a readonly mode that does not render the Inmput Fields. Default is false</div>
        <div class="Property">ErrorMode</div>
        <div class="PropertyDescription">Set wether the control is in error mode. Error mode identifies a field as in error. This attribute does not persist across postbacks. Default is false</div>
        <div class="Property">EmptyMessage</div>
        <div class="PropertyDescription">Set the message displayed when the textbox is empty. This is also referred to as the Watermark</div>
        <div class="Property">AutoPostBackMode</div>
        <div class="PropertyDescription">Normal mode will AutoPostBack in the same manner as a typical asp.net TextBox (when the control looses focus). OnKeyUp will trigger a postback after each key is pressed. This operation is optimized to use a delay to gather several keypresses into one postback. The default mode is Off which provides no AutoPostBack capability.</div>
        <div class="Property">DelayMsOnKeyUp</div>
        <div class="PropertyDescription">Set the delay in milliseconds that the client does asynchronus postbacks when a key is pressed and the control is in OnKeyUp AutoPostBack mode. A higher delay will reduce the amount of postbacks, increase the amount of characters captured before a postback but it also increases the time before results are displayed. The default is 300ms.</div>

    </div>
</asp:Content>